<template>
  <sys-header class="home-header" @logo-click="onLogoClick">
    <div v-if="menuList.length" class="menus">
      <span
        v-for="item in menuList"
        :key="item.name"
        :class="{ actived: activedMenu === item.name }"
        @click="onMenuClick(item.name)">
        {{ item.title }}
      </span>
    </div>
    <div class="right-btns">
      <vip-day v-if="isAdminRole" class="vip-center"></vip-day>
      <Crumbs v-if="showCrumbs" class="web-return" displayType="return"></Crumbs>
      <user-info-icon-new></user-info-icon-new>
    </div>
  </sys-header>
</template>

<script>
import SysHeader from '@bcom/SysHeader'
import Crumbs from '@com/Crumbs.vue'
import { mapGetters } from 'vuex'
import UserInfoIconNew from '@bcom/UserInfoIconNew'
import VipDay from '@bcom/VipDay.vue'

import { ROUTER_GROUPS } from '@utility/constant.js'
import { findFirstLeafChild } from '@utility/utility.js'

export default {
  name: 'homeHeader',
  props: {},
  components: {
    Crumbs,
    UserInfoIconNew,
    VipDay,
    SysHeader,
  },
  data() {
    return {
      activedMenu: ROUTER_GROUPS.home,
    }
  },
  computed: {
    ...mapGetters(['leftNavMenus']),
    ...mapGetters('role', ['isOperateRole', 'isAdminRole', 'isMainRole', 'isOrgRole']),
    showCrumbs() {
      // return this.$route.name !== 'home'
      return false
    },
    showReturn() {
      return this.$route.meta.deepth && this.$route.meta.deepth >= 2
      // return false
    },
    menuList() {
      let menuList = []
      if (this.isOperateRole) {
        menuList = []
      } else if (this.isAdminRole) {
        menuList = [
          {
            name: ROUTER_GROUPS.home,
            title: '首页',
            routerName: 'homePage',
          },
          {
            name: ROUTER_GROUPS.jxgl,
            title: '考核管理',
            routerName: 'xnglIndex',
          },
          {
            name: ROUTER_GROUPS.pskh,
            title: '平时考核',
            routerName: 'xnkhIndex',
          },
        ]
      } else {
        menuList = [
          {
            name: ROUTER_GROUPS.home,
            title: '首页',
            routerName: 'homePage',
          },
          {
            name: ROUTER_GROUPS.pskh,
            title: '平时考核',
            routerName: 'xnkhIndex',
          },
        ]
      }
      return menuList
    },
  },
  watch: {
    // activedMenu() {
    //   this.goMenuPage()
    // },
    '$route.meta'(val) {
      const { group } = val
      if (group !== undefined && this.activedMenu !== group) {
        this.activedMenu = group
      }
    },
  },
  created() {
    const { group } = this.$route.meta
    this.activedMenu = group
    this.$store.commit('setLeftMenuPcode', this.activedMenu)
  },
  methods: {
    onLogoClick() {
      if (!this.isAdminRole) {
        this.$router.push({
          name: 'homePage',
        })
      }
    },
    onMenuClick(menu) {
      this.activedMenu = menu
      this.goMenuPage()
    },
    goMenuPage() {
      if (this.activedMenu === ROUTER_GROUPS.home) {
        this.$router.push({
          name: 'homePage',
        })
      } else {
        this.$store.commit('setLeftMenuPcode', this.activedMenu)
        // find sub menus
        const nextMenu = findFirstLeafChild(this.leftNavMenus, 'menuVOS')
        console.log('nextMenu :>> ', nextMenu)
        if (nextMenu?.belongPage !== this.$route.name) {
          this.$router.push({
            name: nextMenu.belongPage,
          })
        }
      }
    },
    goHome() {
      this.$router.replace({
        name: 'home',
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.home-header {
  .menus {
    height: 100%;
    // height: 50px;
    display: flex;
    align-items: center;
    font-size: 16px;
    margin-left: 40px;

    span {
      display: inline-block;
      cursor: pointer;
      color: #ffffff;
      padding-bottom: 5px;
      border-bottom: 1px solid transparent;
      &:hover {
        border-bottom: 1px solid #ffffff;
      }
      &.actived {
        font-weight: bold;
        border-bottom: 1px solid #ffffff;
      }
      &:not(:last-child) {
        margin-right: 30px;
      }
    }
  }
  .right-btns {
    position: absolute;
    right: 20px;
    top: 10px;
    bottom: 10px;
    display: flex;
    align-items: center;
    .btn-item {
      cursor: pointer;
      height: 45px;
      padding: 10px 20px;
      position: relative;
      font-size: 16px;
      img {
        vertical-align: middle;
        display: inline-block;
      }
      .iconfont {
        color: #8c8c8c;
        vertical-align: middle;
        display: inline-block;
        font-size: 18px;
      }
      .btn-txt {
        color: #8c8c8c;
        vertical-align: middle;
        margin-left: 10px;
      }
      &:hover {
        background: rgba($color: #fff, $alpha: 0.2);
      }
    }
    .btn-spliter {
      display: inline-block;
      vertical-align: middle;
      width: 1px;
      height: 12px;
      margin: 0 10px;
      background: rgba($color: #8c8c8c, $alpha: 0.45);
    }
  }
  .web-return {
    margin-right: 20px;
  }
  .vip-center {
    margin-right: 20px;
  }
}
</style>
